<template>
  <div>
      <template v-for="(v,index) in menuList">
          <el-submenu :index='v.name' v-if="v.children&&v.children.length>0" :key="index+1">
              <template slot="title">
                  <i :class="v.meta.icon"></i>
                  <span>{{v.meta.name}}</span>
              </template>
              <el-menu-item-group>
                  <my-nav :menuList="v.children"></my-nav>
              </el-menu-item-group>
          </el-submenu>
          <el-menu-item :key="index+100" :index="v.name" @click="gotoRoute(v.name)" v-else>
              <i :class="v.meta.icon"></i>
              <span slot="title">{{v.meta.name}}</span>
          </el-menu-item>
      </template>
  </div>
</template>

<script>
export default {
  name: "my-nav",
    props:{
        menuList:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
  data() {
    return {};
  },

  mounted() {},

  methods: {
      gotoRoute(name){
          this.$router.push({name})
      }
  },
};
</script>

<style lang="scss" scoped>
</style>